<template>
  <div class="home">
    <header>
      <div class="top">
        <dl>
          <dt>
            <img src="@/assets/1.jpg" alt />
          </dt>
          <dd v-if="toplist.supports">
            <p>
              <img src="@/assets/2.png" alt />
              <span @click="show = true">{{toplist.name}}</span>
            </p>
            <p>{{toplist.description}} /{{toplist.deliveryTime}}分钟送达</p>
            <p>
              <img src="@/assets/4.png" alt />
              <span class="span1">{{toplist.supports[0].description}}</span>
            </p>
          </dd>
        </dl>
      </div>
      <div class="main">
        <img src="@/assets/3.png" alt />
        <span>{{toplist.bulletin}}</span>>
      </div>
    </header>
    <section>
      <ul>
        <!-- 跳转 -->
        <li>
          <router-link to="/home/shop">商品</router-link>
        </li>
        <li>
          <router-link to="/home/evaluate">评价</router-link>
        </li>
        <li>
          <router-link to="/home/merchant">商家</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </section>
    <footer>
      <van-icon
        name="shopping-cart-o"
        color="#80858a"
        @click="shopcard"
        :badge="$store.getters.nums==0?null:$store.getters.nums"
      />
      <span>￥{{$store.getters.sums}}</span>
      <span>另需配送费￥4元</span>
      <span>￥20元起送</span>
    </footer>
    <!-- 购物车弹框 -->
    <van-popup v-model="flag" position="bottom" :style="{ height: '30%' }">
      <div class="cardtop">
        <span>购物车</span>
        <span @click="clean">清空</span>
      </div>
      <ul class="detail">
        <li v-for="(item,key) in $store.state.card" :key="key">
          <span style="font-size:0.28rem">{{item.name}}</span>
          <div style="display: flex;">
            <span
              style="margin-right:0.3rem; color:red; font-weight:700; font-size:0.21rem"
            >￥{{item.price}}</span>
            <span>
              <van-stepper theme="round" button-size="22" disable-input v-model="item.number" />
            </span>
          </div>
        </li>
      </ul>
      <!-- {{$store.state.card}} -->
    </van-popup>
    <!-- 商家信息弹出层 -->
    <van-overlay :show="show" v-model="show">
      <!-- 优惠信息 -->
      <div class="info">
        <h1>{{toplist.name}}</h1>
        <ul class="icon">
          <li>
            <img src="@/assets/xx.png" alt />
          </li>
          <li>
            <img src="@/assets/xx.png" alt />
          </li>
          <li>
            <img src="@/assets/xx.png" alt />
          </li>
          <li>
            <img src="@/assets/xx.png" alt />
          </li>
          <li>
            <img src="@/assets/bxx.png" alt />
          </li>
        </ul>
        <div class="Border">
          <p></p>
          <p>优惠信息</p>
          <p></p>
        </div>
      </div>
      <!-- 商家公告 -->
      <div class="box" v-if="toplist.supports">
        <ul class="notice">
          <li>
            <img src="@/assets/jian.png" alt />
            <span>{{toplist.supports[0].description}}</span>
          </li>
          <li>
            <img src="@/assets/zhe.png" alt />
            <span>{{toplist.supports[2].description}}</span>
          </li>
          <li>
            <img src="@/assets/zhe.png" alt />
            <span>{{toplist.supports[1].description}}</span>
          </li>
          <li>
            <img src="@/assets/te.png" alt />
            <span>{{toplist.supports[4].description}}</span>
          </li>
          <li>
            <img src="@/assets/te.png" alt />
            <span>{{toplist.supports[3].description}}</span>
          </li>
        </ul>
        <div class="Border">
          <p></p>
          <p>商家公告</p>
          <p></p>
        </div>
        <!-- 公告内容 -->
        <div class="Notice">{{toplist.bulletin}}</div>
      </div>
      <!--  -->
      <!-- x号 -->
      <div class="pop-up">
        <span class="close" @click="show = false">X</span>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      toplist: {},
      // 商家信息弹出层
      show: false,
      // 购物车弹框
      flag: false
    };
  },
  methods: {
    // 点击底部购物车 购物车弹框显示
    shopcard() {
      this.flag = true;
    },
    // 点击清空
    clean(q) {
      this.$store.commit("clear", q);
    }
  },
  async mounted() {
    let { data: res } = await this.$http.get("/mock/data.json");
    // console.log(res);
    this.toplist = res.seller;
  }
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
}
header {
  height: 2.68rem;
  background: url(.././assets/1.jpg) no-repeat;
  background-size: 100% 100%;
  .top {
    height: 2.12rem;
    background-color: rgba(87, 88, 92, 0.9);
    dl {
      display: flex;
      dt {
        img:nth-child(1) {
          width: 1.28rem;
          height: 1.28rem;
          margin: 0.48rem 0.32rem 0.36rem 0.48rem;
        }
      }
      dd {
        p:nth-child(1) img {
          width: 0.6rem;
          height: 0.36rem;
          margin: 0.56rem 0.12rem 0.16rem 0;
        }
        p:nth-child(1) {
          display: flex;
        }
        p:nth-child(1) span {
          font-size: 0.32rem;
          color: #fff;
          font-weight: bold;
          line-height: 0.36rem;
          margin-top: 0.55rem;
        }
        p:nth-child(2) {
          font-size: 0.24rem;
          color: #fff;
          font-weight: 2rem;
          line-height: 0.24rem;
          margin: 0.16rem 0 0.2rem 0;
        }
        p:nth-child(3) {
          display: flex;
          .span1 {
            font-size: 0.2rem;
            color: #ffffff;
            font-weight: 2rem;
            line-height: 0.24rem;
          }
          .span2 {
            font-size: 0.2rem;
            color: #ffffff;
            margin: 0.2rem 0.12rem 0.14rem 0.2rem;
          }
          .span3 {
            color: #ffffff;
          }
        }
        p:nth-child(3) img {
          width: 0.24rem;
          height: 0.24rem;
          margin: 0 0.08rem 0 0.04rem;
        }
      }
    }
  }
  .main {
    height: 0.56rem;
    background-color: rgba(71, 64, 58, 1);
    display: flex;
    line-height: 0.56rem;
    img {
      width: 0.44rem;
      height: 0.24rem;
      margin: 0.16rem 0.08rem 0 0.24rem;
    }
    span {
      width: 6rem;
      font-size: 0.2rem;
      font-weight: 2rem;
      color: #fff;
      white-space: nowrap; /*设置不换行*/
      overflow: hidden; /*设置溢出隐藏*/
      text-overflow: ellipsis; /*文本隐藏触发事件：设置省略号*/
    }
  }
}
section {
  height: 100%;
  overflow: hidden;
  ul {
    display: flex;
    height: 0.8rem;
    background: #ffffff;
    color: #4d555d;
    li {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
  }
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.96rem;
  background: #2f3031;
  display: flex;
  align-items: center;
  .van-icon {
    margin: 0 0.36rem;
    font-size: 0.4rem;
  }
  span:nth-child(2) {
    margin-right: 0.24rem;
    font-size: 0.32rem;
    color: #919396;
  }
  span:nth-child(3) {
    font-size: 0.32rem;
    font-weight: 400;
    color: #6a6e72;
    margin-right: 0.7rem;
  }
  span:nth-child(4) {
    width: 2.1rem;
    height: 100%;
    color: #979a9c;
    background: #2b333b;
    font-size: 0.24rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.pop-up {
  width: 100%;
  height: 100%;
  .close {
    font-size: 0.64rem;
    position: fixed;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #bfbfbf;
  }
}
.info {
  height: 3.26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  h1 {
    font-size: 0.32rem;
    font-weight: 700;
    color: #fff;
    margin: 1.28rem 0 0.38rem 0;
  }
  .icon {
    display: flex;
    img {
      width: 0.4rem;
      height: 0.38rem;
    }
  }
}
.Border {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  p:nth-child(1),
  p:nth-child(3) {
    width: 2.24rem;
    height: 0.02rem;
    background: #61656c;
  }
  p:nth-child(2) {
    margin: 0 0.24rem;
    font-size: 0.27rem;
    font-weight: bold;
    color: #fff;
  }
}
.box {
  height: 3.88rem;
  .notice {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.36rem 0 0 0.95rem;
    li {
      display: flex;
      line-height: 0.55rem;
      align-items: center;
      color: #fff;
      img {
        width: 0.32rem;
        height: 0.32rem;
        margin-right: 0.12rem;
      }
    }
  }
}
.Notice {
  color: #fff;
  font-size: 0.24rem;
  font-weight: 200;
  line-height: 0.47rem;
  margin: 0.46rem 1rem 0 1rem;
}

.detail {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #dbdee1;
    margin: 0 0.36rem;
    height: 0.96rem;
  }
}
// 购物车弹框
.cardtop {
  height: 0.78rem;
  background: #f3f5f7;
  border-bottom: solid 2px #dbdee1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span:nth-child(1) {
    font-size: 0.28rem;
    font-weight: 200;
    color: #07111b;
  }
  span:nth-child(2) {
    font-size: 0.24rem;
    color: #3eade0;
  }
}
.van-popup {
  position: absolute;
  bottom: 0.96rem;
  left: 0;
}
</style>
